import { ComponentType } from 'react'
import Taro, { Component } from '@tarojs/taro'
import {View, Image, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import {pageSize, navigateBack, showToast, getAvatar, subTime, navigateTo} from "../../utils/common";

import './buyLog.scss'
import {IStoreProps} from "../../store/Stores";
import {RecordOutput} from "../../api/api";

interface IHomeProps extends IStoreProps { }

@inject("stores")
@observer
class Index extends Component<IHomeProps> {

  constructor(props){
    super(props)
  }

  state = {
    pageIndex: 1,
    pageSize: pageSize,
    items: [] as RecordOutput[],
    totalCount: 0,
  }

  componentWillMount () {
    let id = this.$router.params.id
    if(!id) {
      showToast('参数错误~')
      setTimeout(() => { navigateBack() }, 2000)
    }
    this.getBuyLog(id)
  }


  getBuyLog(id: string) {
    let { fishStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    fishStore.userOrderRecordPage({
      productId: id,
      pageIndex,
      pageSize,
      callback: res => {
        if (this.state.pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getBuyLog(this.state.id)
      })
    }
  }

  link = (url: string) => {
    navigateTo(url)
  }

  render () {
    let { items } = this.state
    return (
      <View className='index buy-log page-bg content-20'>
        {
          items.length<=0&&<View className='desc' style={{ padding: 20 }}>暂时没有相关购买记录~</View>
        }
        {
          items.length>0&&
          <View className='list02'>
            {
              items.map((item, index) => {
                return(
                  <View className='list02__item' key={item.id}>
                    <View className={'list02__id list02__id-top'+index}>{index+1}</View>
                    <Image className='list02__avatar' src={getAvatar(item.avatar)} />
                    <View className='list02__info'>
                      <View className='list02__name'>{item.nickName}</View>
                      <View className='list02__date'>{subTime(item.payTime)}</View>
                    </View>
                    <View className='list02__num'>{item.productQuantity}<Text className='small'>条</Text></View>
                  </View>
                )
              })
            }
          </View>
        }
       {/* <View className='list02'>
          <View className='list02__item'>
            <View className='list02__id list02__id-top1'>1</View>
            <Image className='list02__avatar' src={require('../../assets/img/img_01.jpg')} />
            <View className='list02__info'>
              <View className='list02__name'>慕小乔</View>
              <View className='list02__date'>2019-11-15</View>
            </View>
            <View className='list02__num'>500<Text className='small'>份</Text></View>
          </View>
          <View className='list02__item'>
            <View className='list02__id'>2</View>
            <Image className='list02__avatar' src={require('../../assets/img/img_01.jpg')} />
            <View className='list02__info'>
              <View className='list02__name'>慕小乔</View>
              <View className='list02__date'>2019-11-15</View>
            </View>
            <View className='list02__num'>500<Text className='small'>份</Text></View>
          </View>
        </View>*/}
      </View>
    )
  }
}

export default Index as ComponentType
